<template>
  <div class="fate-list">
    <group id="gundong">
      <cell title="菜缘头条" class="hot">
        <marquee>
          <marquee-item v-for="(item, i) in topList" :key="i" @click.native="$router.push(`/detail/${item._id}`)">{{item.content.slice(0, 8)}}</marquee-item>
        </marquee>
      </cell>
    </group>
    <scroller :noDataText="noDataText" :on-refresh="refresh" :on-infinite="infinite" style="padding-top:128px;min-height: 500px;" ref="my_scroller">
      <div>
        <grid style="margin:5px 0;" :show-lr-borders="false" :cols="2">
          <grid-item v-for="(item,i) in tabList" :key="i" :link="item.link" :label="item.name">
            <i :style="{'color':item.color}" slot="icon" :class="item.icon"></i>
          </grid-item>
        </grid>
        <item-list @remove="handleRemove" :datalist="list" @focusman="handleFocusman" :hasLikeArr="[]" :hasAttenArr="[]"></item-list>
      </div>
    </scroller>
    <actionsheet
      v-model="showConfirm"
      :menus="cacelList"
      show-cancel
      @on-click-menu="clickMenu">
    </actionsheet>
  </div>
</template>
<script>
import { Vue, Component } from 'vue-property-decorator';
import { Actionsheet, Cell, Group, Marquee, MarqueeItem, Grid, GridItem } from 'vux';
import { namespace } from 'vuex-class';
import { getUnixTime } from '../../js/utils'
import ItemList from '../common/Item';
const IndexStore = namespace('list');
const HomeStore = namespace('home');
@Component({
  components: { Actionsheet, ItemList, Cell, Group, Marquee, MarqueeItem, Grid, GridItem }
})
export default class RecommenList extends Vue {
  @IndexStore.Action getPostList;
  @IndexStore.State postList;
  @HomeStore.Action getWatchUser;
  @HomeStore.Action getLikePost;
  @HomeStore.Action getUnWatchPost;
  @HomeStore.Action getSaveCollect;
  @HomeStore.Action getTopPostList;
  @HomeStore.State topPostList;
  showConfirm = false
  cacelList = {
  	0: '不再看到此条帖子',
  	1: '收藏',
    2: '举报'
    // 3: '不看此人'
  }
  list = []
  topPost = {}
  topList = []
  currentPage = 1
  currentItem = null
  pageSize = 10
  noDataText = '--我也是有底线的--'
  tabList = [
    { name: '约约看', color: '#ee7c80', link: '/secondhandlist/约约看', icon: 'icon-hua' },
    { name: '表白墙', color: '#db4562', link: '/secondhandlist/表白墙', icon: 'icon-yueTAtianchong' }
  ]
  initTopList () {
    const params = {
      current: 1,
      pageSize: 10,
      isTop: true
    }
    this.getTopPostList(params).then(msg => {
      if (msg) {
        this.$vux.toast.text(msg, 'middle');
      } else {
        const { list } = this.topPostList
        this.topList = list
      }
    })
  }
  created () {
    this.initTopList()
    this.initTopList1()
  }
  handleFocusman (item) {
    const params = {
      status: 0,
      user2Obj: item.creator
    }
    this.getWatchUser(params).then(msg => {
      if (msg) {
        this.$vux.toast.text(msg, 'middle');
      } else {
        this.$vux.toast.text('关注成功', 'middle');
      }
    })
  }
  infinite () {
    this.initPostList()
    this.currentPage++
    setTimeout(() => {
      this.$refs.my_scroller.finishInfinite(true)
    }, 1000)
  }
  myTime = new Date()
  refresh () {
    this.myTime = new Date()
    setTimeout(() => {
      this.list = []
      this.currentPage = 1
      this.$refs.my_scroller.finishPullToRefresh()
    }, 1000)
  }
  handleRemove (item) {
    this.currentItem = item
    this.id = item._id
    this.showConfirm = true
  }
  userInfo = (localStorage.getItem('loginInfo') && JSON.parse(localStorage.getItem('loginInfo')).user) || ''
  clickMenu (key, value) {
    if (key === '2') {
      const { creator, _id } = this.currentItem
      const info = {
        _id,
        creator,
        type: 'post'
      }
      this.$router.push({
        path: `/report`,
        query: {
          info
        }
      })
    }
    if (key === '1') {
      const params = {
        postId: this.id,
        userId: this.userInfo._id
      }
      this.getSaveCollect(params).then(msg => {
        if (msg) {
          this.$vux.toast.text(msg, 'middle');
        } else {
          this.$vux.toast.text('收藏成功', 'middle');
        }
      })
    }
    if (key === '0') {
      const params = {
        postId: this.id
      }
      this.getUnWatchPost(params).then(msg => {
        if (msg) {
          this.$vux.toast.text(msg, 'middle');
        } else {
          this.$vux.toast.text('已不再看到此帖子', 'middle');
        }
      })
    }
  }
  initPostList () {
    const params = {
      current: this.currentPage,
      pageSize: this.pageSize,
      createTime: getUnixTime(this.myTime),
      category: '菜缘',
      userId: this.userInfo && this.userInfo._id
    }
    this.getPostList(params).then(msg => {
      if (msg) {
        this.$vux.toast.text(msg, 'middle');
      } else {
        const { list } = this.postList
        this.list = this.list.concat(list)
      }
    })
  }
  initTopList1 () {
    const params = {
      current: this.currentPage,
      pageSize: this.pageSize,
      category: '菜缘',
      isTop: true
    }
    this.getPostList(params).then(msg => {
      if (msg) {
        this.$vux.toast.text(msg, 'middle');
      } else {
        const { list } = this.postList
        this.topPost = list[0] || {}
      }
    })
  }
}
</script>
<style lang="less">
  .fate-list {
    .weui-grid {
      padding: 10px;
    }
    .weui-cells {
      margin-top: 0;
    }
    #gundong {
      position: fixed !important;
      top: 90px;
      left: 0;
      width: 100%;
      z-index: 1;
    }
    .weui-grids {
      background: #ffffff;
    }
    .weui-grid__icon {
      display: flex;
      align-items: center;
      justify-content: center;
      i {
        font-size: 30px !important;
      }
    }
  }
</style>


